body {
  font-size: 14px !important;
}
/* ==================
  元素设置成怪异模式
  (设置边框和padding不会改变元素的宽高)
==================== */
.box-border {
  box-sizing: border-box;
}
.box-content {
  // 默认的正常模式
  box-sizing: content-box;
}

/* ==================
      line边线
 ==================== */
[class*='ok-hairline']:after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  //border: 0 solid #dfdfdf;
  border: 0 solid #e2e5e5;
  transform: scale(0.5);
}

.ok-hairline,
.ok-hairline--bottom,
.ok-hairline--left,
.ok-hairline--right,
.ok-hairline--surround,
.ok-hairline--top,
.ok-hairline--top-bottom {
  position: relative;
}

.ok-hairline--top:after {
  border-top-width: 1px;
}

.ok-hairline--left:after {
  border-left-width: 1px;
}

.ok-hairline--right:after {
  border-right-width: 1px;
}

.ok-hairline--bottom:after {
  border-bottom-width: 1px;
}

.ok-hairline--top-bottom:after,
.ok-hairline-unset--top-bottom::after {
  border-width: 1px 0;
}

.ok-hairline--surround:after {
  border-width: 1px;
}

/* ==================
      浮动:float
 ==================== */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

/* ==================
      超出显示省略号
 ==================== */
.ellip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellip2,
.ellip3,
.ellip4,
.ellip5,
.ellip6,
.ellip7 {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.ellip2 {
  -webkit-line-clamp: 2;
}

.ellip3 {
  -webkit-line-clamp: 3;
}

.ellip4 {
  -webkit-line-clamp: 4;
}

.ellip5 {
  -webkit-line-clamp: 5;
}

.ellip6 {
  -webkit-line-clamp: 6;
}

.ellip7 {
  -webkit-line-clamp: 7;
}

/* ==================
      flex弹性布局
 ==================== */
.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.basis-xs {
  flex-basis: 20%;
}

.basis-sm {
  flex-basis: 40%;
}

.basis-df {
  flex-basis: 50%;
}

.basis-lg {
  flex-basis: 60%;
}

.basis-xl {
  flex-basis: 80%;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
  flex: 2;
}

.flex-treble {
  flex: 3;
}

.flex-direction {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: flex-center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.align-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* ==================
      flex栅格布局
 ==================== */
.flex-row {
  display: flex;
  flex-wrap: wrap;
}
.flex-col-1,
.flex-col-2,
.flex-col-3,
.flex-col-4,
.flex-col-5,
.flex-col-6,
.flex-col-7,
.flex-col-8,
.flex-col-9,
.flex-col-10,
.flex-col-11,
.flex-col-12 {
  box-sizing: border-box;
}
.flex-col-1 {
  flex-basis: 8.3333333333333%;
}

.flex-col-2 {
  flex-basis: 16.6666666666667%;
}

.flex-col-3 {
  flex-basis: 25%;
}

.flex-col-4 {
  flex-basis: 33.3333333333333%;
}

.flex-col-5 {
  flex-basis: 41.6666666666667%;
}

.flex-col-6 {
  flex-basis: 50%;
}

.flex-col-7 {
  flex-basis: 58.3333333333333%;
}

.flex-col-8 {
  flex-basis: 66.6666666666667%;
}

.flex-col-9 {
  flex-basis: 75%;
}

.flex-col-10 {
  flex-basis: 83.3333333333333%;
}

.flex-col-11 {
  flex-basis: 91.6666666666667%;
}

.flex-col-12 {
  flex-basis: 100%;
}

/* ==================
      grid网格布局
      http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
      容器指定了网格布局以后，接着就要划分行和列。
      grid-template-columns属性定义每一列的列宽，
      grid-template-rows属性定义每一行的行高。
 ==================== */
.grid {
  display: grid;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  display: grid;
}

.grid-1 {
  grid-template-columns: repeat(1, 2fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 2fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 2fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 2fr);
}

.grid-5 {
  grid-template-columns: repeat(5, 2fr);
}

.grid-6 {
  grid-template-columns: repeat(6, 2fr);
}

.grid-7 {
  grid-template-columns: repeat(7, 2fr);
}

.grid-8 {
  grid-template-columns: repeat(8, 2fr);
}

.grid-9 {
  grid-template-columns: repeat(9, 2fr);
}

.grid-10 {
  grid-template-columns: repeat(10, 2fr);
}

.grid-11 {
  grid-template-columns: repeat(11, 2fr);
}

.grid-12 {
  grid-template-columns: repeat(12, 2fr);
}

/** 行列的间隔 
  * grid-gap仅在设置了grid-template才能生效
*/
.grid-gap-xs {
  grid-gap: 5px 5px;
}
.grid-gap-sm {
  grid-gap: 10px 10px;
}
.grid-gap {
  grid-gap: 15px 15px;
}
.grid-gap-lg {
  grid-gap: 20px 20px;
}
.grid-gap-xl {
  grid-gap: 25px 25px;
}
.grid-gap-30 {
  grid-gap: 30px 30px;
}

/** 行间隔*/
.grid-row-gap-xs {
  grid-row-gap: 5px;
}
.grid-row-gap-sm {
  grid-row-gap: 10px;
}
.grid-row-gap {
  grid-row-gap: 15px;
}
.grid-row-gap-lg {
  grid-row-gap: 20px;
}
.grid-row-gap-xl {
  grid-row-gap: 25px;
}
.grid-row-gap-30 {
  grid-row-gap: 30px;
}

/** 列间隔 */
.grid-column-gap-xs {
  grid-column-gap: 5px;
}
.grid-column-gap-sm {
  grid-column-gap: 10px;
}
.grid-column-gap {
  grid-column-gap: 15px;
}
.grid-column-gap-lg {
  grid-column-gap: 20px;
}
.grid-column-gap-xl {
  grid-column-gap: 25px;
}
.grid-column-gap-30 {
  grid-column-gap: 30px;
}

/* ==================
      文本对齐方式
 ==================== */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-top {
  vertical-align: top;
}

.text-middle {
  vertical-align: middle;
}

.text-bottom {
  vertical-align: bottom;
}
